<template>
  <view class="content">
    <view
      class="banner"
      style="
        background-image: url(../../static/stopCar/cp_bg1.png);
        background-size: 100% 100%;
      "
    >
      <text>停车缴费</text>
      <text>请输入正确的车牌号</text>
    </view>
    <view class="number-content">
      <text class="dialog-title">车牌号码</text>
      <view class="dialog-license-container" @click="cancelHandler">
        <view class="dialog-license-box" @click.stop="">
          <view class="dialog-row-license-box">
            <template v-for="(item, index) in brand">
              <text
                v-if="item == '新能源'"
                :key="index"
                class="dialog-license new-energy"
                @click.stop="onBrandClick"
                :data-index="index"
                >{{ currentIndex === index ? "" : item }}</text
              >
              <text
                v-else
                :key="index"
                class="dialog-license"
                :class="{
                  'dialog-active': currentIndex === index,
                  'dialog-dot': index === 1,
                }"
                :style="{ marginRight: index === 1 ? '36rpx' : '12rpx' }"
                @click.stop="onBrandClick"
                :data-index="index"
                >{{ item }}</text
              >
            </template>
          </view>
          <view class="bigcar">
            <u-checkbox-group>
              <u-checkbox
                v-model="item.checked"
                v-for="(item, index) in list"
                :key="index"
                :name="item.name"
                shape="circle"
                >{{ item.name }}</u-checkbox
              >
            </u-checkbox-group>
          </view>
          <u-button
            type="primary"
            :custom-style="buttonStyle"
            @click="handleSubmit"
            :loading="loading"
            >确定</u-button
          >
          <view class="car-number" @click="specialNumber">
            <u-icon name="photo" size="32"></u-icon>
            <text>输入特殊车牌</text>
            <u-icon name="arrow-right" size="20"></u-icon>
          </view>
        </view>

        <!-- 省份 -->
        <view
          class="dialog-province-box"
          v-if="isShowProvinceSelect && show"
          @click.stop=""
        >
          <view class="dialog-header">
            <text class="dialog-cancel" @click.stop="cancelHandler"> 取消</text>
            <text @click.stop="submitHandler">完成</text>
          </view>
          <view class="dialog-grid-box">
            <text
              v-for="(item, index) in province"
              :key="index"
              @click.stop="provinceClick"
              :data-item="item"
              >{{ item }}</text
            >
            <view class="dialog-close-box" @click.stop="clearHandler"> </view>
          </view>
        </view>

        <!-- 车牌 -->
        <view
          class="dialog-province-box"
          v-if="isShowBrandSelect && show"
          @click.stop=""
        >
          <view class="dialog-header">
            <text class="dialog-cancel" @click.stop="cancelHandler">取消</text>
            <text @click.stop="submitHandler">完成</text>
          </view>
          <view class="dialog-grid-box">
            <text
              v-for="(item, index) in brand_code"
              :key="index"
              @click.stop="brandCodeHandler"
              :data-item="item"
              :class="{ 'dialog-gray-text': !item.isShow }"
              >{{ item.code }}</text
            >
            <text @click.stop="clearHandler" class="dialog-close">删除</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      value1: "",
      isEnd: false, //是否可以结束输入
      isNotEnergy: true,
      brand: ["", "", "", "", "", "", "", "新能源"],
      currentIndex: 0,
      province: [
        "京",
        "津",
        "沪",
        "渝",
        "冀",
        "豫",
        "云",
        "辽",
        "黑",
        "湘",
        "皖",
        "鲁",
        "新",
        "苏",
        "浙",
        "赣",
        "鄂",
        "桂",
        "甘",
        "晋",
        "蒙",
        "陕",
        "吉",
        "闽",
        "贵",
        "粤",
        "青",
        "藏",
        "川",
        "宁",
        "琼",
        "使",
        "无",
      ],
      brand_code: [
        {
          code: "1",
          isShow: true,
        },
        {
          code: "2",
          isShow: true,
        },
        {
          code: "3",
          isShow: true,
        },
        {
          code: "4",
          isShow: true,
        },
        {
          code: "5",
          isShow: true,
        },
        {
          code: "6",
          isShow: true,
        },
        {
          code: "7",
          isShow: true,
        },
        {
          code: "8",
          isShow: true,
        },
        {
          code: "9",
          isShow: true,
        },
        {
          code: "0",
          isShow: true,
        },
        {
          code: "Q",
          isShow: true,
        },
        {
          code: "W",
          isShow: true,
        },
        {
          code: "E",
          isShow: true,
        },
        {
          code: "R",
          isShow: true,
        },
        {
          code: "T",
          isShow: true,
        },
        {
          code: "Y",
          isShow: true,
        },
        {
          code: "U",
          isShow: true,
        },
        {
          code: "O",
          isShow: false,
        },
        {
          code: "P",
          isShow: true,
        },
        {
          code: "港",
          isShow: false,
        },
        {
          code: "A",
          isShow: true,
        },
        {
          code: "S",
          isShow: true,
        },
        {
          code: "D",
          isShow: true,
        },
        {
          code: "F",
          isShow: true,
        },
        {
          code: "G",
          isShow: true,
        },
        {
          code: "H",
          isShow: true,
        },
        {
          code: "J",
          isShow: true,
        },
        {
          code: "K",
          isShow: true,
        },
        {
          code: "L",
          isShow: true,
        },
        {
          code: "澳",
          isShow: false,
        },
        {
          code: "Z",
          isShow: true,
        },
        {
          code: "X",
          isShow: true,
        },
        {
          code: "C",
          isShow: true,
        },
        {
          code: "V",
          isShow: true,
        },
        {
          code: "B",
          isShow: true,
        },
        {
          code: "N",
          isShow: true,
        },
        {
          code: "M",
          isShow: true,
        },
        {
          code: "学",
          isShow: false,
        },
        {
          code: "领",
          isShow: false,
        },
      ],
      list: [
        {
          name: "是否为中大型车辆（黄牌车）",
          checked: false,
        },
      ],
      buttonStyle: {
        fontSize: "32rpx",
        borderRadius: "16rpx",
        background: "#1677FE",
        height: "100rpx",
        margin: "100rpx 55rpx 60rpx",
      },
      show: true,
      loading:false
    };
  },
  computed: {
    isShowProvinceSelect() {
      return this.currentIndex === 0;
    },
    isShowBrandSelect() {
      return this.currentIndex > 0;
    },
  },
  created() {},
  methods: {
    specialNumber() {
      uni.navigateTo({
        url: "../../pagesA/specialNumber/index",
      });
    },
    // 校验车牌
    isVehicleNumber(vehicleNumber) {
      let result = false;
      const express =
        /^(([京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领][A-Z](([0-9]{5}[DF])|([DF]([A-HJ-NP-Z0-9])[0-9]{4})))|([京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领][A-Z][A-HJ-NP-Z0-9]{4}[A-HJ-NP-Z0-9挂学警港澳使领]))$/;
      result = express.test(vehicleNumber);
      return result;
    },
    onBrandClick(e) {
      // console.log(e.currentTarget.dataset.index);
      this.show = true;
      this.currentIndex = e.currentTarget.dataset.index;
    },
    provinceClick(e) {
      console.log(e.currentTarget.dataset.item, "111111111111111111111");
      let { brand, currentIndex } = this;
      brand[currentIndex++] = e.currentTarget.dataset.item;
      this.brand = brand;
      this.currentIndex =
        currentIndex === brand.length ? currentIndex - 1 : currentIndex;
      this.resetKeyboard();
      this.brandIsEnd();
    },
    brandCodeHandler(e) {
      console.log(e.currentTarget.dataset.item, "e.currentTarget.dataset.item");
      if (!e.currentTarget.dataset.item.isShow) return;
      const item = e.currentTarget.dataset.item;
      let { brand_code, currentIndex, brand } = this;
      if (
        (currentIndex === 6 && item.code === "澳") ||
        item.code === "港" ||
        item.code === "领" ||
        item.code === "学"
      ) {
        //处理选择了 港澳领学
        brand[currentIndex] = item.code;
        this.isNotEnergy = false; //设置最后一个味是否为灰色
      } else {
        brand[currentIndex++] = item.code;
        this.isNotEnergy = true; //
      }
      this.brand = brand;
      this.brand_code = [...brand_code];
      if (currentIndex < 7) {
        this.currentIndex =
          currentIndex === brand.length ? currentIndex - 1 : currentIndex;
      }
      this.resetKeyboard();
      this.brandIsEnd();
    },
    //判断时候结束
    brandIsEnd() {
      let { brand } = this;
      this.isEnd = !brand.includes("");
    },
    //重新设置键盘
    resetKeyboard() {
      let { brand_code, currentIndex } = this;
      if (currentIndex === 1) {
        brand_code = brand_code.map((item) => {
          if (
            item.code === "澳" ||
            item.code === "港" ||
            item.code === "领" ||
            item.code === "学"
          ) {
            console.log("currentIndex", currentIndex);
            return {
              ...item,
              isShow: false,
            };
          } else {
            return {
              ...item,
              isShow: true,
            };
          }
        });
      } else if (currentIndex === 6) {
        brand_code = brand_code.map((item) => {
          if (item.code === "O") {
            console.log("currentIndex", currentIndex);
            return {
              ...item,
              isShow: false,
            };
          } else {
            return {
              ...item,
              isShow: true,
            };
          }
        });
      } else {
        brand_code = brand_code.map((item) => {
          if (
            item.code === "澳" ||
            item.code === "港" ||
            item.code === "领" ||
            item.code === "学" ||
            item.code === "O"
          ) {
            return {
              ...item,
              isShow: false,
            };
          } else {
            return {
              ...item,
            };
          }
        });
      }
      this.brand_code = brand_code;
    },
    clearHandler() {
      let { brand, currentIndex } = this;
      if (currentIndex <= 0) return;
      console.log(currentIndex);
      brand[currentIndex--] = currentIndex === 6 ? "新能源" : "";
      this.brand = brand;
      this.currentIndex = currentIndex;
      this.resetKeyboard();
      this.brandIsEnd();
    },
    handleSubmit() {
      const brand = [...this.brand];
      if (brand[brand.length - 1] === "新能源") {
        brand.pop();
      }
      const licensePlate = brand.join("");
      const checked = this.isVehicleNumber(licensePlate);
      if (checked) {
        this.loading=true
        let openid = uni.getStorageSync("userInfo").openid;
        this.$Api
          .getOrderByCarNo({
            openid,
            carNo: licensePlate,
          })
          .then((res) => {
            this.loading=false
            uni.navigateTo({
              url: "../parkingPay/index?parkInfo=" + encodeURIComponent(JSON.stringify(res.data)) ,
            });
            this.cancelHandler();
          });
      } else {
        console.log("请输入正确的车牌号码");
        uni.showToast({
          title: "请输入正确的车牌号码",
          icon: "none",
        });
      }
    },
    submitHandler() {
      const brand = [...this.brand];
      if (brand[brand.length - 1] === "新能源") {
        brand.pop();
      }
      console.log(brand);
      const licensePlate = brand.join("");
      const checked = this.isVehicleNumber(licensePlate);
      if (checked) {
        // this.$emit('onOk', licensePlate);
        this.show = false;
      } else {
        console.log("请输入正确的车牌号码");
        uni.showToast({
          title: "请输入正确的车牌号码",
          icon: "none",
        });
      }
    },
    cancelHandler() {
      this.isEnd = false; //是否可以结束输入
      this.isNotEnergy = true;
      this.brand = ["", "", "", "", "", "", "", "新能源"];
      this.currentIndex = 0;
      // this.$emit('onCancel');
      this.show = false;
    },
  },
};
</script>

<style lang="scss" scoped>
@import "index.scss";
</style>
